/<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 组件引入 -->
        <question-bank :tableData="tableData" @tableDatas="settableDatas"/>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="9"
            ><el-alert
              :title="` 数据一共 ${counts} 条`"
              type="info"
              show-icon
              :closable="false"
            >
            </el-alert
          ></el-tab-pane>
          <el-tab-pane label="待审核" name="0"
            ><el-alert  :title="` 数据一共 ${counts} 条`" type="info" show-icon :closable="false">
            </el-alert
          ></el-tab-pane>
          <el-tab-pane label="已审核" name="1"
            ><el-alert  :title="` 数据一共 ${counts} 条`" type="info" show-icon :closable="false"> </el-alert
          ></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"
            ><el-alert  :title="` 数据一共 ${counts} 条`" type="info" show-icon :closable="false"> </el-alert
          ></el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%" max-height="500">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="150">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="150">
          </el-table-column>
          <!-- prop="questionType" -->
          <el-table-column prop="questionType" label="题型" width="150">
            <template slot-scope="scope">
              <span>{{ questions(scope.row.questionType) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="question" label="题干" width="150">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>

          <el-table-column prop="addDate" label="录入时间" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="difficulty" label="难度" width="150">
            <template slot-scope="scope">
              <span>{{ diff(scope.row.difficulty) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="creator" label="录入人" width="150">
          </el-table-column>

          <el-table-column prop="chkState" label="审核状态" width="150">
            <template slot-scope="scope">
              <span>{{ auditStatus(scope.row.chkState) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="chkRemarks" label="审核意见" width="150">
          </el-table-column>

          <el-table-column prop="chkUser" label="审核人" width="150">
          </el-table-column>
          <!-- prop="publishState" -->
          <el-table-column prop="publishState" label="发布状态" width="150">
            <template slot-scope="scope">
              <span>{{ publish(scope.row.publishState) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="preview(scope.row, tableData)"
                type="text"
                size="small"
              >
                预览
              </el-button>
              <el-button
                @click.native.prevent="Aduitdialog(scope.row, tableData)"
                type="text"
                size="small"
                :disabled="scope.row.chkState === 1|| scope.row.chkState === 2 ? true : false"
              >
                审核
              </el-button>
              <el-button
                @click.native.prevent="updateRow(scope.row, tableData)"
                type="text"
                 :disabled="scope.row.publishState ===1 ? true : false"
                size="small"
              >
                修改
              </el-button>
              <el-button
                @click.native.prevent="putaway(scope.row, tableData)"
                type="text"
                size="small"
              >
                {{scope.row.publishState === 0 ? '上架' : '下架'}}
              </el-button>
              <el-button
                @click.native.prevent="deleteAudit(scope.row, tableData)"
                  :disabled="scope.row.publishState ===1 ? true : false"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pageRight">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            layout="prev, pager,next,sizes,jumper "
            :total="counts"
          >
          <!-- :page-size="pages.pagesize" -->
          </el-pagination>
        </div>
        <!-- 审核弹出框 -->
         <el-dialog
                class="dialogLeft"
                style="flocat:left"
                  title="题目审核"
                  :visible.sync="dialogVisible"
                  width="25%"
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                  @close="aduitClose"
                >
                  <aduit-check ref="aduits" :aduitId="aduitId" @cancel="cancel"/>

                </el-dialog>
                <!-- 预览对话框 -->
        <el-dialog
        title="题目浏览"
        :visible.sync="showQuest"
        width="63%"
      >
      <questions-preview :listObj='listObj'></questions-preview>
        <span slot="footer" class="footerFn">
          <el-button type="primary"  @click="showQuest = false">关 闭</el-button>
        </span>
      </el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>
import questionBank from '@/components/questionBank'
import { choice, remove, choicePublish, detail } from '@/api/hmmm/questions.js'
// 导入需要枚举的数据
import {
  questionType,
  chkType,
  difficulty,
  publishType
} from '@/api/hmmm/constants.js'
// 导入审核组件
import aduitCheck from '@/components/aduitCheck'
// 导入预览对话框
import questionsPreview from '../components/articles-preview'
// 导入时间组件
import dayjs from 'dayjs'
export default {
  name: 'questions-choice',
  data () {
    return {
      keywords: '', // 关键字
      subjectIDs: 0, // 学科ID
      aduitId: 0, // 审核需要的id
      showQuest: false, // 控制预览框
      showDialog: false, // 控制审核题目对话框
      dialogVisible: false, // 控制审核框的显示和隐藏
      activeName: '9',
      counts: 0, // 总记录数
      pages: {
        chkState: null,
        page: 1, // 当前页码
        pagesize: 10 // 当前页显示条数
      },
      tableData: [],
      listObj: {},
      que: {}
    }
  },
  computed: {
    // 计算审核状态
    getTabList: () => {
      console.log(this.auditData)
    }
  },
  created () {
    this.getList()
  },
  filters: {
    // 格式化入职日期的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    }
  },
  methods: {
    // 点击审核弹出框X
    aduitClose () {
      this.$refs.aduits.cancel()
      console.log(1)
    },
    // 点击子组件的搜索
    settableDatas (res) {
      this.que = res
      this.pages.page = 1
      console.log(res)
      // this.pages = { ...this.pages, ...res }
      this.getList()
    },
    // 获取精品题库列表
    async getList () {
      const res = await choice({ ...this.pages, ...this.que })
      this.tableData = res.data.items
      this.counts = res.data.counts
      // this.pages = res.data
    },
    // 点击触发tabs事件
    handleClick (tab, event) {
      // this.tableData = []
      // this.pages.keyword = this.keywords
      // this.pages.subjectID = this.subjectIDs
      // this.pages = { ...this.keywords, ...this.subjectIDs, ...this.pages }
      if (tab.name === '9') {
        this.pages.chkState = null
      } else {
        this.pages.chkState = tab.name
      }
      // this.pages = {  }
      this.getList()
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    // 当每页需要显示不同的数据的时候就会被触发
    handleSizeChange (val) {
      this.pages = { ...this.pages, ...this.que }
      this.pages.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pages = { ...this.pages, ...this.que }
      this.pages.page = val
      this.getList()
      // console.log(`当前页: ${val}`)
    },
    // 转换题型数据
    questions (ques) {
      // 1单选 2多选 3简答
      return questionType[ques - 1].label
    },
    // 转换审核状态
    auditStatus (ques) {
      // console.log(ques) 1 1 2 1
      // 现在通过是1 拒绝是2 那么待审核就是0
      return chkType[ques].label
    },
    // 转换难度
    diff (ques) {
      return difficulty[ques - 1].label
    },
    // 转换发布状态
    publish (ques) {
      // 1 0 0 0 1已发布 0 待发布
      return publishType[ques].label
    },
    // 点击审核
    Aduitdialog (obj) {
      console.log(obj.chkState)
      this.aduitId = obj.id
      this.dialogVisible = true
    },
    // 点击预览
    async  preview (obj) {
      console.log(obj)
      this.listObj = obj
      this.showQuest = true
      const id = obj.id
      this.parentId = id
      // 调用基础题库详情接口
      const { data } = await detail({ id })
      this.listObj = data
    },
    // 关闭审核弹窗
    cancel () {
      this.dialogVisible = false
      this.getList()
    },
    // 点击删除
    async deleteAudit (row) {
      const obj = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (obj === 'cancel') {
        return this.$message('您取消了删除')
      }
      if (this.tableData.length === 1) {
        this.pages.page--
        if (this.pages.page <= 1) {
          this.pages.page = 1
        }
      }
      const res = await remove(row)
      console.log(res)
      this.$message.success('删除成功')
      this.getList()
    },
    // 上架
    async putaway (row) {
      const obj = await this.$confirm(`您确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (obj === 'cancel') {
        return this.$message(`您取消了${row.publishState === 0 ? '上架' : '下架'}`)
      }
      // 0上架 1是下架
      console.log(row.publishState)
      // row.publishState = 0
      if (row.publishState === 0) {
        row.publishState = 1
      } else {
        row.publishState = 0
      }
      await choicePublish(row)
      this.$message.success(`${row.publishState === 0 ? '上架' : '下架'}成功`)
      this.getList()
    },
    // 点击修改
    updateRow (row) {
      this.$router.push(`/questions/new?id=${row.id}`)
      console.log(row)
    }
  },
  components: {
    questionBank,
    aduitCheck,
    questionsPreview
  }
}
</script>

<style scoped>
.pageRight {
  float: right;
}
.dialogLeft{
  float: left;
}

.footerFn{
   margin-top: -40px;
  float: right;
}
</style>
